<template>
  <div id="app">
    <AppHeader :title="title" v-if="bool" />
    <router-view />
    <AppFooter v-if="bool" />
  </div>
</template>
<script>
import AppHeader from "./components/header.vue";
import AppFooter from "./components/footer.vue";

// import router from "./router/index";
export default {
  watch: {
    $route(route) {
      route.name == "Piano" || route.name == "Login"
        ? (this.bool = false)
        : (this.bool = true);
      this.title = route.meta.title;
    }
  },
  data() {
    return {
      title: "主页",
      bool: true,
      isShowGoBack: false,
      isShowHeader: true,
      isShowFooter: true
    };
  },
  components: {
    AppHeader,
    AppFooter
  },
  methods: {},
  mounted() {
    window.onbeforeunload = function() {
      var storage = window.localStorage;
      storage.clear();
    };
  }
};
</script>
<style lang="scss">
html,
body,
#app {
  height: 100%;
  overflow: hidden;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #e9e9e9;

  .page-h {
    height: 100%;
    overflow-y: scroll;
  }
  .page {
    height: calc(100% - 64px - 49px);
    overflow-y: scroll;
    background: #161616;
  }
  .page-c {
    height: calc(100% - 64px);
    overflow-y: scroll;
    background: #161616;
  }
}
</style>
